<template>
  <div>
      <h1>修改患者信息</h1>
        <el-form :model="form" ref="form" :data="form" :rules="rules" label-width="80px"  >
            <el-row>
                <el-col :span="16">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="性别">
                  <el-radio-group v-model="form.gender">
                    <el-radio :label="0">女</el-radio>
                    <el-radio :label="1">男</el-radio>
                  </el-radio-group>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="form.idCard"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄">
                    <el-input-number v-model="form.age"  :min="1" :max="99"></el-input-number>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="电话号码" prop="phoneNumber">
                        <el-input v-model="form.phoneNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="住院时间">
                        <el-date-picker v-model="form.value1" type="date" placeholder="选择日期"></el-date-picker>     
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                <el-form-item label="治疗医院">
                  <el-input v-model="form.hospital"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否重症">
                    <el-radio-group v-model="form.sick">
                      <el-radio :label="0">否</el-radio>
                      <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                  <el-form-item label="感染来源">
                    <el-input v-model="form.from" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="症状">
                    <el-input v-model="form.symptom"></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-col :span="16">
            <el-form-item label="住址">
                <el-input v-model="form.address" ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="16">
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.desc" rows="4"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="16">
            <el-form-item>
            
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button>取消</el-button>
            </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
import request from '@/utils/request'

  export default {
    created(){
    this.fetchData()
    },
    data() {
      return {
          pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        form: {
          name: '',
          phoneNumber: '',
          idCard: '',
          address: '',
          resource: '',
          desc: '',
          symptom:'',
          from: '',
          age:undefined, //数字类型，没有默认值时，填undefined
          sick:1,
          gender:1,
          hospital:''
        },
        rules:{
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'change' }    //change:内容发生改变时进行校验     ,失去焦点就不再提示
          ],
          idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '身份证号格式错误！', trigger: 'blur' }
          ],
          phoneNumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {  min:11, max:11, message: '手机号格式错误！', trigger: 'change' }
          ],
        }
      }
    },
    methods: {
        fetchData(){
          request({
            url: '../patient_change.json',
            method: 'get',   //发请求
          }).then(response => {
            this.form = response.data
            console.log(response.data)
          })
      },
      onSubmit() {
        console.log('submit!');
      },
      handleEdit(){
          this.$router.push({
              path:'patient/change'
          })
      }
    }
  }
</script>